<template>
  <div class="maintenance">
    <div class="title" v-if="pathShow">
      <i class="iconfont iconzuojiantou" @click="onClickLeft"></i>
      <span>{{ notice }}</span>
      <i class="iconfont iconzuojiantou" style="color: white;"></i>
    </div>
    <div class="titlecenter" v-else>
      <span>{{ notice }}</span>
    </div>
    <div class="tit">
      <div :class="{ active: isActive == 'left' }" @click="tabItem('left')">
        申请需求
      </div>
      <div :class="{ active: isActive == 'right' }" @click="tabItem('right')">
        需求记录
      </div>
    </div>
    <!-- 申请维修内容 -->
    <div class="content" v-show="showLeft">
      <van-cell-group>
        <van-field
          v-model="username"
          clearable
          label="家庭地址："
          placeholder="请输入地址"
        />
        <van-field
          v-model="password"
          label="需求描述:"
          placeholder="请简单说明一下问题"
          clearable
        />
        <van-field
          v-model="phone"
          type="tel"
          label="联系方式："
          placeholder="请输入联系手机号"
          clearable
        />
      </van-cell-group>

      <div class="btnSumit" @click="applily">提交申请</div>
    </div>
    <!-- 维修记录内容 -->
    <div class="rightCon" v-show="!showLeft">
      <ul>
        <li v-for="(item,index) in MaintenanceArry" :key="index">
          <div class="one">
            <p>{{item.createTime | ProofcreateTime}}</p>
            <p>
              {{item.description}}
            </p>
          </div>
          <div class="two">
            <span>{{item.status | MaintenanceState}}</span>
            <i class="iconfont iconbianji" @click="openEditModel(item.id,item.address,item.description,item.contactMobile)" v-if="item.status == 1"></i>
            <i class="iconfont icondianhua" @click="openPhoneModel(item.id)" v-if="item.status == 2"></i>
            <i class="iconfont iconshanchu1" @click="openDelModel(item.id)" v-if="item.status == 3 || item.status == 4"></i>
          </div>
        </li>
      </ul>
      
      <div class="ShowDiv" v-if="Arryshou">
        <span>暂无数据</span>
      </div>
    </div>
    <!-- 编辑地址弹窗 -->
    <div class="editModel" v-show="editModel">
      <div class="editBox">
        <div class="top" @click="closeEditModel">
          <i class="iconfont iconshanchuguanbicha"></i>
        </div>
        <div class="two">
          <h3>家庭地址</h3>
          <input type="text" v-model="address" placeholder="请输入住址">
          
        </div>
        <div class="three">
            <h3>问题描述</h3>
            <input type="text" v-model="describe" placeholder="请描述问题">
        </div>
        <div class="three">
            <h3>联系方式</h3>
            <input type="number" v-model="PhoneNum" placeholder="请输入联系方式">
        </div>
        <div class="confirm" @click="getReferred">
           提交申请
        </div>
        <div class="cancle" @click="getabolished">
          取消申请
        </div>
      </div>
    </div>
    <!-- 一键拨打电话 -->
    <div class="phoneModel" v-show="phoneModel">
       <div class="phoneBox">
           <div class="top" @click="closePhoneModel">
             <i class="iconfont iconshanchuguanbicha"></i>
           </div>
           <div class="second">
             <i class="iconfont icondianhua"></i>
             <span>维修工电话</span>
           </div>
           <div class="telNum">
              <span>+86</span><span>{{phoneNumber}}</span>
           </div>
           <div class="immit" @click="callPhone">
             立即拨打
           </div>
       </div>
    </div>
    <!-- 确认删除 -->
    <div class="delModel" v-show="delModel">
        <div class="delBox">
           <div class="top" @click="closeDelModel">
             <i class="iconfont iconshanchuguanbicha"></i>
           </div>
           <div class="second">
             确认删除吗
           </div>
           <div class="immit" @click="deleate">
             确认删除
           </div>
        </div>
    </div>
    <!-- <tabBar v-if="!pathShow" :Zindex = "zindex"></tabBar> -->
    <tabBar></tabBar>
  </div>
</template>

<script>
import { Toast } from 'vant';
import tabBar from '../components/tabBar';
export default {
  name: "maintenance",
  data() {
    return {
      notice: "需求",
      isActive: "left",
      username: "",
      password: "",
      phone: "",
      showLeft: true,
      editModel:false,//编辑地址模态框
      phoneNumber:'13673379816',
      phoneModel:false,
      delModel:false,
      MyuserId:"",//用户id
      MaintenanceArry:[],//维修信息展示
      Arryshou:true,
      address:"",//维修修改住址
      describe:"",//维修修改信息
      PhoneNum:"",//维修修改手机号码
      Uid:"",//修改信息id
      paths:"",
      zindex: false,
    };
  },
  components:{
       tabBar
    },
  created (){
    this.loadComments();
    this.paths = this.$route.query.paths
   
  },
  mounted() {
        //监听手机屏幕的高度
        // this.ReleaseH = window.screen.height 
        window.onresize = ()=>{ 
            var Height = document.documentElement.clientHeight || document.body.clientHeight
            var SS = Height*2/100
            if(SS < 9.6){
                this.zindex = true;
            }
            else{
                this.zindex = false;
            }
        }  
  },
  computed: {
      pathShow(){
           if(this.paths == "index"){
               return true;
           }
           else if(this.paths == "Mymi"){
               return true;
           }
           else{
              return false;
           }
      }
  },
  filters:{
      MaintenanceState(value){
        if(value == 1){
          return "处理中"
        }
        else if(value == 2){
          return "维修中"
        }
        else if(value == 3){
          return "维修完成"
        }
         if(value == 4){
          return "已取消"
        }
      },
      ProofcreateTime (createTime){
            if(!!createTime){
                return createTime.substring(0,10);
            }
            else{
                return '';
            } 
        }
    },
  methods: {
        //取出用户id
        loadComments() {
        var list = JSON.parse(localStorage.getItem("key"));
        this.MyuserId = list.userId;
        },
    onClickLeft() {
      this.$router.go(-1);
    },
    tabItem(val) {
      this.isActive = val;
      if (val == "left") {
        this.showLeft = true;
      } else {
        this.showLeft = false;
        this.MaintenanceNews();
      }
    },
    //申请维修
    applily (){
      var reg =/^1[3,4,5,6,7,8,9][0-9]{9}$/;
        if(this.username==''){
           Toast("请输入家庭住址")
            return false
        }else if(this.password==''){
           Toast("请输入问题描述")
            return false
        }else if(this.phone==''){
            Toast('请输入联系方式')
             return false
        }else if(!reg.test(this.phone)){
            Toast('手机号格式不正确')
            return false
        }
        else{
            this.$axios.post('/village/maintain/add',{
              contactMobile:this.phone,
              description:this.password,
              address:this.username
          }).then(res =>{
            // console.log(res)
            if(res.data.code==0){
                Toast(res.data.msg == '操作成功' ? "提交成功" : res.data.msg)
                this.phone='';
                this.password='';
                this.username='';
            }else{
                Toast(res.data.msg)
            }
          })
        }
    },
    // 村维修展示
    MaintenanceNews(){
      this.$axios.post("/village/maintain/list",{
        uId:this.MyuserId,
      }).then(res =>{
        // console.log("维修消息",res)
        this.MaintenanceArry = res.data.rows;
        if(this.MaintenanceArry.length > 0){
             this.Arryshou = false;
        }
        else{
            this.Arryshou = true;
        }
       
      })
    },
   
    //关闭编辑地址
    closeEditModel (){
        this.editModel=false
    },
     //打开编辑地址
    openEditModel (Uid,address,description,contactMobile){
        this.editModel=true;
        this.Uid = Uid;
        this.address = address;
        this.describe = description;
        this.PhoneNum = contactMobile;
    },
    //提交申请
    getReferred(){
        let reg =/^1[3,4,5,6,7,8,9][0-9]{9}$/;
        if(this.describe == "" || this.Uid == ""){
          Toast('请输入描述信息')
          return false
        }
        else if(!reg.test(this.PhoneNum)){
            Toast('手机号格式不正确')
            return false
        }
        else{
          this.revamped();
        }
    },
    //取消申请
    getabolished(){
       this.$axios.post("/village/maintain/cancelVillage",{
        id: this.Uid,
      }).then(res =>{
        // console.log("取消维修",res)
         this.editModel=false;
         this.MaintenanceNews();
         Toast('已经取消申请');
      })
    },
    //修改维修信息
    revamped(){
      this.$axios.post("/village/maintain/edit",{
        id: this.Uid,
        contactMobile:this.PhoneNumber,
        description:this.describe,
        address:this.address
      }).then(res =>{
        // console.log("修改维修信息",res)
         this.editModel=false;
         this.MaintenanceNews();
         Toast('修改成功');
      })
    },
      // 调用拨号功能
      callPhone () {
          window.location.href = 'tel://' + this.phoneNumber
      },
      //关闭模态框
      closePhoneModel (){
         this.phoneModel=false
      },
       //打开模态框
      openPhoneModel (Uid){
        this.phoneModel=true;
        this.Uid = Uid;
        this.Number();
      },
      //维修工电话
      Number(){
        this.$axios.post("/village/record/villagePhonenumber",{
          mId:this.Uid
        }).then(res =>{
          //  console.log("维修工电话",res)
           if(res.data.code == 0){
             this.phoneNumber = res.data.msg;
           }
        })
      },
      //关闭删除框
      closeDelModel (){
         this.delModel=false
      },
      //打开删除框
      openDelModel (Uid){
         this.delModel=true;
         this.Uid = Uid;
      },
      deleate(){
        this.DeleteInformation();
      },
      //删除维修信息
      DeleteInformation(){
        this.$axios.post("/village/maintain/editDeleteState",{
          id:this.Uid
        }).then(res =>{
          //  console.log("删除维修信息",res)
           if(res.data.code == 0){
             this.delModel=false;
             this.MaintenanceNews();
             Toast('删除成功');
            //  this.phoneNumber = res.data.msg;
           }
        })
      },
  }
};
</script>

<style lang="less" scoped>
.maintenance {
  font-size: 0;
  width: 100%;
  height: 100%;
//   background-color: #f8f8f8;
  .title {
    width: 100%;
    font-size: 0.36rem;
    color: #333;
    height: 1.25rem;
    line-height: 1.25rem;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 0.2rem;
    box-sizing: border-box;
  }
  .titlecenter {
    width: 100%;
    font-size: 0.36rem;
    color: #333;
    height: 1.25rem;
    line-height: 1.25rem;
    background-color: #fff;
    padding: 0 0.2rem;
    text-align: center;
  }
  .tit {
    display: flex;
    justify-content: space-around;
    font-size: 0.3rem;
    background: #fff;
    padding: 0.25rem 0;
    box-sizing: border-box;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }
  .active {
    color: #38a83f;
    border-bottom: 2px solid #38a83f;
    padding-bottom: 0.15rem;
    box-sizing: border-box;
  }
  .content {
    font-size: 0.28rem;
    color: #333;
    background-color: #fff;
    margin-top: 0.1rem;
    width: 100%;
    height: 2rem;
    .btnSumit {
      width: 6.82rem;
      height: 0.92rem;
      line-height: 0.92rem;
      background: rgba(56, 168, 63, 1);
      border-radius: 0.46rem;
      text-align: center;
      color: #fff;
      font-size: 0.32rem;
      font-family: Adobe Heiti Std R;
      margin: 0 auto;
      margin-top: 0.7rem;
    }
  }
  // 维修内容
  .rightCon {
    background-color: #fff;
    font-size: 0.24rem;
    ul {
      li {
        border-bottom: 1px solid #e5e5e5;
        padding: 0.15rem 0.3rem;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .one {
          width: 70%;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          p {
            &:nth-child(1) {
              font-size: 0.24rem;
              color: #999;
              margin-bottom: 0.1rem;
            }
            &:nth-child(2) {
              font-size: 0.24rem;
              color: #666;
              font-weight: Medium;
            }
          }
        }
        .two {
          i {
            margin-left: 0.15rem;
            font-size: 0.26rem;
          }
        }
      }
    }
    .ShowDiv{
        width: 100%;
        height: 0.92rem;
        font-size:0.24rem;
        text-align: center;
        line-height: 0.92rem;
        color: rgb(112, 95, 95);
        background: rgb(248, 248, 248);
        // background: red;
    }
  }
  // 编辑地址弹窗
  .editModel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    font-size: 0.26rem;
    .editBox {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      background-color: #fff;
      width: 6.5rem;
      height: 7.4rem;
      padding:0.2rem 0.2rem 0.4rem 0.4rem;
      box-sizing: border-box;
      border-radius: 0.2rem;
      .top{
         text-align: right;
         i{
            font-size: 0.4rem;
         }
      }
      .two{
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 0.28rem;
         h3{
            color: #222222;
            font-size: 0.34rem;
            font-weight: Medium;
         }
         .select{
            margin:0.2rem 0;
            font-size: 0.24rem;
            color:#999;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-color: transparent;
            select{
               width: 33%;
               text-align: center;
               font-size: 0.24rem;
               color:#999;
                 background-color: transparent;
               option{
                  background-color: none;
                   font-size: 0.24rem;
                   color:#999;
                   border: none;
               }
            }
         }
      }
      .three{
           padding-bottom:0.26rem;
           border-bottom: 1px solid #e5e5e5;
            margin-bottom: 0.28rem;
            box-sizing: border-box;
            h3{
                color: #222222;
                font-size: 0.34rem;
                font-weight: Medium;
                margin-bottom: 0.1rem;
            }
            input{
               font-size: 0.24rem;
               color:#666;
               &::placeholder{
                  font-size: 0.24rem;
                  color:#666;
               }
            }
      }
      .confirm{
         width:5rem;
        height:.84rem;
        background:rgba(56,168,63,1);
        border-radius:.42rem;
        line-height: 0.84rem;
        text-align: center;
        color:#fff;
        font-size: 0.36rem;
        margin:0 auto;
      }
      .cancle{
          width:5rem;
          height:.84rem;
          background:rgba(252,31,31,1);
          border-radius:.42rem;
          line-height: 0.84rem;
          text-align: center;
          color:#fff;
          font-size: 0.36rem;
          margin:0 auto;
          margin-top:.4rem;
      }
    }
  }
  //一键拨打电话
  .phoneModel{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.6);
      font-size: 0.26rem;
      .phoneBox{
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          background-color: #fff;
          width: 6.5rem;
          height:3.5rem;
          padding:0.2rem 0.2rem 0.4rem 0.4rem;
          box-sizing: border-box;
          border-radius: 0.2rem;
          .top{
             text-align: right;
             i{
                font-size: 0.3rem;
             }
          }
          .second{
             width: 100%;
             text-align: center;
             margin:0.2rem auto 0.4rem;
             font-size: 0.28rem;
             color:#222;
             i{
                color:#1184ef;
                font-size: 0.26rem;
             }
          }
          .telNum{
             text-align: center;
             font-size: 0.28rem;
             color:#222;
             span:nth-child(1){
                margin-right:0.1rem;
             }
          }
          .immit{
             width:5rem;
            height:.84rem;
            background:rgba(56,168,63,1);
            border-radius:0.42rem;
            margin:0 auto;
            color: #fff;
            font-size: 0.34rem;
            line-height: 0.84rem;
            text-align: center;
            margin-top:0.4rem;
          }
      }
  }
  //确认删除弹框
  .delModel{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.6);
      font-size: 0.26rem;
      .delBox{
           position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          background-color: #fff;
          width: 6.5rem;
          height:3.5rem;
          padding:0.2rem 0.2rem 0.4rem 0.4rem;
          box-sizing: border-box;
          border-radius: 0.2rem;
           text-align: center;
          .top{
               text-align: right;
          }
          .second{
             font-size: 0.32rem;
          }
           .immit{
             width:5rem;
            height:.84rem;
            background:rgba(56,168,63,1);
            border-radius:0.42rem;
            margin:0 auto;
            color: #fff;
            font-size: 0.34rem;
            line-height: 0.84rem;
            text-align: center;
            margin-top:1.05rem;
          }
      }
  }

}
</style>
